<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport">
    <title>授权api调用网页工具</title>
    <link href="../static/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="../static/assets/fonts/fontawesome-all.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
    <nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
        <div class="container-fluid d-flex flex-column p-0">
            <a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
                <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
                <div class="sidebar-brand-text mx-3"><span>Brand</span></div>
            </a>
            <hr class="sidebar-divider my-0">
            <ul class="nav navbar-nav text-light" id="accordionSidebar">
                <li class="nav-item" role="presentation"></li>
                <li class="nav-item" role="presentation"></li>
                <li class="nav-item" role="presentation"></li>
                <li class="nav-item" role="presentation"></li>
            </ul>
            <div class="text-center d-none d-md-inline"></div>
        </div>
    </nav>
    <div class="d-flex flex-column" id="content-wrapper">
        <div id="content">
            <div class="container-fluid">
                <h3 class="text-dark mb-4">Profile</h3>
                <div class="row mb-3">
                    <div class="col-lg-8">
                        <div class="row mb-3 d-none">
                            <div class="col">
                                <div class="card text-white bg-primary shadow">
                                    <div class="card-body">
                                        <div class="row mb-2">
                                            <div class="col">
                                                <p class="m-0">Peformance</p>
                                                <p class="m-0"><strong>65.2%</strong></p>
                                            </div>
                                            <div class="col-auto"><i class="fas fa-rocket fa-2x"></i></div>
                                        </div>
                                        <p class="text-white-50 small m-0"><i class="fas fa-arrow-up"></i>&nbsp;5% since last month</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-success shadow">
                                    <div class="card-body">
                                        <div class="row mb-2">
                                            <div class="col">
                                                <p class="m-0">Peformance</p>
                                                <p class="m-0"><strong>65.2%</strong></p>
                                            </div>
                                            <div class="col-auto"><i class="fas fa-rocket fa-2x"></i></div>
                                        </div>
                                        <p class="text-white-50 small m-0"><i class="fas fa-arrow-up"></i>&nbsp;5% since last month</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">简化模 / implicit(隐式授权)模式</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>clientId</strong></label><input class="form-control" id="simplify-clientId" th:value="${param.client_id}" type="text"></div>
                                                <div class="form-group"><label ><strong>secret</strong></label><input class="form-control" id="simplify-secret" th:value="${param.client_secret}" type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" onclick="simplify()" role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span ><strong>返回值：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="simplify-text"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">客户端模式</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>clientId</strong></label><input class="form-control" id="client-clientId" th:value="${param.client_id}" type="text"></div>
                                                <div class="form-group"><label ><strong>secret</strong></label><input class="form-control" id="client-secret" th:value="${param.client_secret}" type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" onclick="client()" role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span ><strong>返回值：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="client-text"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">密码模式</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>clientId</strong></label><input class="form-control" id="password-clientId" th:value="${param.client_id}" type="text"></div>
                                                <div class="form-group"><label ><strong>secret</strong></label><input class="form-control" id="password-secret" th:value="${param.client_secret}" type="text"></div>
                                                <div class="form-group"><label ><strong>账号</strong></label><input class="form-control" id="username"  type="text"></div>
                                                <div class="form-group"><label ><strong>密码</strong></label><input class="form-control" id="password"  type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" onclick="passWord()" role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span ><strong>返回值：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="password-text"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">获取授权码</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>clientId</strong></label><input class="form-control" id="code-clientId" th:value="${param.client_id}" type="text"></div>
                                                <div class="form-group"><label ><strong>secret</strong></label><input class="form-control" id="code-secret" th:value="${param.client_secret}" type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" onclick="getcode()" role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span ><strong>授权码：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code th:text=" ${param.code}"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">获取token</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>clientId</strong></label><input class="form-control" id="clientId" th:value="${param.client_id}" type="text"></div>
                                                <div class="form-group"><label ><strong>secret</strong></label><input class="form-control" id="secret" th:value="${param.client_secret}" type="text"></div>
                                                <div class="form-group"><label ><strong>授权码</strong><br></label><input class="form-control" id="code" th:value="${param.code}"  type="text"></div>                                            </div>
                                        </div>
                                        <div class="form-group" ><a class="btn btn-success btn-icon-split" onclick="getToken()"   role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span  class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span><strong>返回信息：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a  class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="token-text"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">校验token</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>acc_token</strong></label><input class="form-control" id="acc-token"  type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group" ><a class="btn btn-success btn-icon-split" onclick="checkToken()"   role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span  class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span><strong>返回信息：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a  class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="check-token-text"></code></div>
                        </div>
                    </div>
                </div>
                <div class="card shadow mb-5">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 font-weight-bold">刷新token</p>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group"><label ><strong>refresh_token</strong></label><input class="form-control" id="refresh-token"  type="text"></div>
                                            </div>
                                        </div>
                                        <div class="form-group" ><a class="btn btn-success btn-icon-split" onclick="refreshToken()"   role="button"><span class="text-white-50 icon"><i class="fas fa-check"></i></span><span  class="text-white text">提交</span></a></div>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <form>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="alert alert-success" role="alert"><span><strong>返回信息：</strong><br></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a  class="btn btn-success btn-icon-split" role="button"></a></div>
                                    </form>
                                </div><code id="refresh-token-text"></code></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="bg-white sticky-footer">
            <div class="container my-auto">
                <div class="text-center my-auto copyright"><span>Copyright © Brand 2021</span></div>
            </div>
        </footer>
    </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></div>
<script src="../static/assets/js/jquery.min.js"></script>
<script src="../static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="../static/assets/js/theme.js"></script>
</body>

<script type="text/javascript">

    function simplify() {
        var clientId = $("#simplify-clientId").val();
        var secret = $("#simplify-secret").val();
        $.ajax({
            url : "/oauth/authorize?client_id="+clientId+"&client_secret="+secret+"&response_type=token",
            method : "GET",
            success: function (res) {
                console.log(res);
                $("#simplify-text").text(JSON.stringify(res));
            }
        });
    };

    function client() {
        var clientId = $("#client-clientId").val();
        var secret = $("#client-secret").val();
        $.ajax({
            url : "/oauth/token?client_id="+clientId+"&client_secret="+secret+"&grant_type=client_credentials",
            method : "POST",
            success: function (res) {
                console.log(res);
                $("#client-text").text(JSON.stringify(res));
            }
        });
    };

    function passWord() {
        var clientId = $("#password-clientId").val();
        var secret = $("#password-secret").val();
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url : "/oauth/token?client_id="+clientId+"&client_secret="+secret+"&grant_type=password&username="+username+"&password="+password,
            method : "POST",
            success: function (res) {
                console.log(res);
                $("#password-text").text(JSON.stringify(res));
            }
        });
    };

    function getcode() {
        var clientId = $("#code-clientId").val();
        var secret = $("#code-secret").val();
        window.location.href = "/oauth/authorize?client_id="+clientId+"&client_secret="+secret+"&response_type=code";

    };

    function getToken() {
        var clientId = $("#clientId").val();
        var secret = $("#secret").val();
        var code = $("#code").val();
        $.ajax({
            url : "/oauth/token?client_id="+clientId+"&client_secret="+secret+"&grant_type=authorization_code&code="+code,
            method : "POST",
            success: function (res) {
                console.log(res);
                $("#token-text").text(JSON.stringify(res));
                $("#acc-token").val(res.access_token);
                $("#refresh-token").val(res.refresh_token);
            }
        });
    };
    function checkToken() {
        var acc_token = $("#acc-token").val();
        $.ajax({
            url : "/oauth/check_token?token=" + acc_token,
            method : "POST",
            success: function (res) {
                console.log(res);
                $("#check-token-text").text(JSON.stringify(res));
            }
        });
    };
    function refreshToken() {
        var clientId = $("#clientId").val();
        var secret = $("#secret").val();
        var refresh_token = $("#refresh-token").val();
        $.ajax({
            url : "/oauth/token?client_id="+clientId+"&client_secret="+secret+"&grant_type=refresh_token&refresh_token=" + refresh_token,
            method : "POST",
            success: function (res) {
                console.log(res);
                $("#token-text").text(JSON.stringify(res));
                $("#acc-token").val(res.access_token);
                $("#refresh-token").val(res.refresh_token);
                $("#refresh-token-text").text(JSON.stringify(res));
            }
        });
    };

</script>

</html>
